<template>
  <div class="post-detail-card ">
    <div class="post-title">
      {{ post.post_name }}
    </div>
    <div class="post-tags-category clearfix">
      <div class="post-tags ">
        <span v-for="tag in post.tags" :key="tag.tag_id">{{
          tag.tag_name
        }}</span>
      </div>
      <div class="post-category">
        <span
          ><Icon type="ios-bookmark" />&nbsp;<span>{{
            post.category.cate_name
          }}</span></span
        >
      </div>
    </div>
    <div class="post-info clearfix">
      <div class="left">
        <span>本文大约{{ post.wordCount }}字</span>
        <span>食用时间:{{ post.readTime }}分钟</span>
      </div>
      <div class="right"></div>
    </div>
    <hr />
    <div class="content" v-html="post.post_content"></div>
    <hr />
    <ul>
      <!--     TODO 一些信息-->
      <li></li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "index",
  props: {
    post: {
      type: Object,
      default: () => ({
        tags: [
          {
            tag_name: "标签1",
            tag_id: 1
          },
          {
            tag_name: "标签2",
            tag_id: 2
          }
        ],
        category: {
          cate_name: "分类"
        },
        wordCount: 1000,
        readTime: 50,
        post_content:
          "其实自从一个月前把信交给费尔明娜·达萨，他已经多次违背不再去小花园的承诺，只不过加倍小心不让自己被发现罢了。一切与以往并无不同。费尔明娜·达萨和姑妈在树下读书，到下午两点左右、全城刚刚从午睡中醒来时结束，然后一起刺绣直到热浪退去。弗洛伦蒂诺·阿里萨不等姑妈走进屋，便迈着英姿飒爽的步伐穿过马路，这种步伐帮助他那软软的膝盖支撑住身体。但他没有走向费尔明娜·达萨，而是径直朝姑妈走去。 “请让我单独和小姐待片刻，”他说，“我有重要的事要对她说。” “放肆！”姑妈对他说，“她的事没有什么是我不能听的。” “那么我就不说了，”他说，“但我要提醒您，您要对此负责。”",
        post_name: "霍乱时期的爱情"
      })
    }
  },
  created() {
    console.log(this.$route);
  }
};
</script>

<style lang="less" scoped>
.post-detail-card {
  height: 500px;
  background-color: white;
  border-radius: 10px;
  padding-top: 10px;
  position: relative;
  .post-title {
    position: absolute;
    top: -80px;
    font-weight: 700;
    color: white;
    text-align: center;
    width: 100%;
    font-size: 26px;
  }
  .post-tags-category {
    padding: 10px 20px;
    .post-tags {
      width: 50%;
      height: 30px;
      float: left;
      line-height: 25px;
      span {
        cursor: pointer;
        float: left;
        margin-left: 20px;
        padding: 0 8px;
        color: #fff;
        font-size: 12px;
        background-color: pink;
        border-radius: 10px;
        &:first-child {
          margin-left: 0;
        }
      }
    }
    .post-category {
      float: right;
      span {
        cursor: pointer;
        &:hover {
          color: pink;
        }
      }
    }
  }
  .post-info {
    padding: 0 20px;
    .left {
      float: left;
      span {
        font-size: 12px;
        color: #333;
      }
    }
    .right {
      float: right;
    }
  }
  .content {
    margin: 25px;
  }
}
</style>
